import React from "react";
import { Card, Table, Form, Input, Button, Space } from "antd";
import "./index.less";

const QueryTable: React.FC = () => {
  const [form] = Form.useForm();

  const columns = [
    {
      title: "规则名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "描述",
      dataIndex: "desc",
      key: "desc",
    },
    {
      title: "服务调用次数",
      dataIndex: "callNo",
      key: "callNo",
      sorter: true,
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
    },
    {
      title: "更新时间",
      dataIndex: "updatedAt",
      key: "updatedAt",
    },
    {
      title: "操作",
      key: "action",
      render: () => (
        <Space size="middle" data-oid="n8vbs_o">
          <Button type="link" onClick={() => {}} data-oid="4wdaoy2">
            配置
          </Button>
          <Button type="link" onClick={() => {}} data-oid="ahr_ac2">
            订阅警报
          </Button>
        </Space>
      ),
    },
  ];

  const data = [
    {
      key: "1",
      name: "规则名称1",
      desc: "这是一段描述",
      callNo: 305,
      status: "关闭",
      updatedAt: "2024-03-21 12:00:00",
    },
    // 更多数据...
  ];

  return (
    <div className="pro-query-table" data-oid="_73trl8">
      <Card className="pro-card" data-oid="z2cc-yb">
        <Form
          form={form}
          layout="inline"
          className="pro-search-form"
          data-oid="i51xf9-"
        >
          <Form.Item name="name" label="规则名称" data-oid="0zkrvyv">
            <Input placeholder="请输入" allowClear data-oid="xl1ew.x" />
          </Form.Item>
          <Form.Item name="status" label="使用状态" data-oid="np5sofq">
            <Input placeholder="请输入" allowClear data-oid="bwz2v-7" />
          </Form.Item>
          <Form.Item data-oid="ai2-3jg">
            <Space data-oid="s5g701x">
              <Button type="primary" htmlType="submit" data-oid="jn_0ria">
                查询
              </Button>
              <Button onClick={() => form.resetFields()} data-oid="4orut5q">
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>

      <Card className="pro-card" data-oid="wpjc3qf">
        <div className="pro-table-operations" data-oid="dxj1k_z">
          <Space data-oid="kwtsg-b">
            <Button type="primary" data-oid="xgq6upd">
              新建
            </Button>
            <Button data-oid="x4nqda_">批量操作</Button>
            <Button data-oid="g4re5yv">导出</Button>
          </Space>
        </div>
        <Table
          columns={columns}
          dataSource={data}
          pagination={{
            total: 100,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
          }}
          data-oid="9p.fjf1"
        />
      </Card>
    </div>
  );
};

export default QueryTable;
